<template>
	<view>
		<van-index-bar>
		  <view>
		    <van-index-anchor index="A" />
		    <van-cell @click="handleItem()" title="安老师" />
		  </view>
		  <view>
		    <van-index-anchor index="C" />
		    <van-cell title="陈宇飞" />
		    <van-cell title="陈浩南" />
		    <van-cell title="陈柔" />
		  </view>
		  <view>
		    <van-index-anchor index="F" />
		    <van-cell title="冯丹丹" />
		    <van-cell title="冯晶晶" />
		  </view>
		  <view>
		    <van-index-anchor index="G" />
		    <van-cell title="高兴" />
		    <van-cell title="高明" />
			<van-cell title="高乐高" />
		  </view>
		  <view>
		    <van-index-anchor index="H" />
		    <van-cell title="何彩莲" />
		    <van-cell title="何仙姑" />
		    <van-cell title="何进" />
		  </view>
		  <view>
		    <van-index-anchor index="L" />
		    <van-cell title="吕洞宾" />
		    <van-cell title="流年" />
		    <van-cell title="六子" />
			<van-cell title="刘大叔" />
			<van-cell title="六婶" />
		  </view>
		  <view>
		    <van-index-anchor index="W" />
		    <van-cell title="王五" />
		    <van-cell title="王大力" />
		    <van-cell title="汪东城" />
		  </view>
		  <view>
		    <van-index-anchor index="Z" />
		    <van-cell title="张凡" />
		    <van-cell title="张晶晶" />
		    <van-cell title="张三" />
		  </view>
		</van-index-bar>
		
		<!-- 详情弹框 -->
		<van-dialog
		  use-slot
		  title="详细信息"
		  :show="visabled"
		  @confirm="onConfirm"
		>
		  <view class="info-box">
			  <view>姓名：{{userInfo.name}}</view>
			  <view>电话：{{userInfo.phone}}</view>
		  </view>
		</van-dialog>
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant/dialog/dialog';
	
	let UserInfo = function(user) {
		this.name = user.name
		this.phone = user.phone
	}
	
	export default {
		data() {
			return {
				visabled:false,
				userInfo: {}
			}
		},
		methods: {
			handleItem(user) {
				this.userInfo = new UserInfo({name: "安老师", phone: "13800138000"})
				this.visabled = true
				console.log(this.userInfo)
			},
			onConfirm() {
				this.visabled = false;
				console.log(this.visabled)
			}
		}
	}
</script>

<style lang="scss">
	.info-box{
		padding: 20rpx 60rpx;
	}
</style>
